<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item"
                :placeholder="'权限名称'" v-model="listQuery.name">
      </el-input>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">
        {{$t('table.search')}}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary"
                 icon="el-icon-edit">{{$t('table.add')}}
      </el-button>

      <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"
                 @click="handleDownload">{{$t('table.export')}}
      </el-button>


    </div>

    <!--表格 start-->
    <el-table
      :key='tableKey' :data="list"
      v-loading="listLoading"
      element-loading-text="给我一点时间" border fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="id"
        align="center"
        label="id"
        width="65"
        sortable="custom">

      </el-table-column>
      <el-table-column
        prop="name"
        label="权限名称">

      </el-table-column>
      <el-table-column
        prop="description"
        label="权限说明">

      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        width="180">

      </el-table-column>
      <el-table-column
        prop="updated_at"
        label="更新时间"
        width="180">

      </el-table-column>
      <!--操作按钮 start-->
      <el-table-column
        align="center"
        :label="$t('table.actions')"
        width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">

          <el-button type="primary" size="mini"
                     @click="handleUpdate(scope.row)">
            {{$t('table.edit')}}
          </el-button>

          <el-button v-if="scope.row.status!='deleted'" size="mini"
                     type="danger" @click="handleModifyStatus(scope.row,'deleted')">
            {{$t('table.delete')}}
          </el-button>
          <!--操作按钮 end-->
        </template>
      </el-table-column>

    </el-table>
    <!--表格 end-->

    <!--弹出表单 start-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px"
               style='width: 400px; margin-left:50px;'>

        <el-form-item :label="'权限'" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <!--<el-form-item :label="$t('table.email')" prop="email">-->
        <!--<el-input v-model="temp.email"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item :label="'说明'" prop="description">
          <el-input type="text" v-model="temp.description"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
        <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>

    <!--弹出表单 end-->
  </div>
</template>

<script>
  import { fetchList, create, update, deletes } from '@/api/permission'
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'

  export default {
    name: 'permission',
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 10,
          order: undefined,
          sort: undefined
        },
        temp: { // 缓存表单数据
          id: undefined,
          name: '',
          description: ''
        },
        textMap: { // 表单标题
          update: '编辑',
          create: '添加'
        },
        dialogPvVisible: false,
        list: null, // 数据集
        downloadLoading: false // 下载加载提示
      }
    },
    methods: {
      // 获取数据集
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.data.data
          this.total = response.data.data.total
          this.listLoading = false
        })
      },
      // 处理搜索栏
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      resetTemp() {
        this.temp = {
          id: undefined,
          name: '',
          email: '',
          password: ''
        }
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            create(this.temp).then((res) => {
              console.log(res)
              this.temp.id = res.data.data.id
              this.temp.created_at = res.data.data.created_at
              this.temp.updated_at = res.data.data.updated_at
              this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      // 导出
      handleDownload() {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
          const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
          const data = this.formatJson(filterVal, this.list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'table-list'
          })
          this.downloadLoading = false
        })
      },
      // 添加操作
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 更新操作
      handleUpdate(row) {
        this.temp = Object.assign({}, row) // copy obj
        // this.temp.timestamp = new Date(this.temp.timestamp)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 删除操作
      handleModifyStatus(row, status) {
        deletes(row).then(() => {
          // this.$message({
          //   message: '操作成功',
          //   type: 'success'
          // })
          this.handleDelete(row)
        })
      },
      handleDelete(row) {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      },
    }
  }
</script>

<style scoped>

</style>
